<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
		/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>onPermissionRequest</title>
		<style>
			html,
			body {
				box-sizing: border-box;
				height: 100%;
				width: 100%;
				font-size: 16px;
				margin: 0;
				overflow: hidden;
			}
			.theShow {
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				flex-wrap: wrap;
			}
			body > h1 {
				position: absolute;
				top: 0;
				left: 0;
			}
			.on-permission-req {
				width: 100%;
				height: 300px;
			}
		</style>
	</head>

	<body>
		<h1>WebView onPermissionRequest Demo</h1>
		<div class="theShow">
			<button onclick="getMedia()">Open Front Camera</button>
		</div>
		<video id="video" autoplay="autoplay" class="on-permission-req"></video>
		<canvas id="canvas" class="on-permission-req"></canvas>
		<script>
			function getMedia() {
				const constraints = {
						audio: true,
						video: { facingMode: 'user' },
					};
				//获取video摄像头区域
				let video = document.getElementById('video');
				navigator.mediaDevices.getUserMedia(constraints).then((MediaStream) => {
					video.srcObject = MediaStream;
					video.play();
				});
			}
		</script>
	</body>
</html>
